{% load comments %}

<div id="commentsContainer">
    <div id="commentsList">
        {% if comments %}
            {% for comment in comments %}
                {% render_comment comment %}
            {% endfor %}
        {% else %}
            <p class="no-comments">Комментариев пока нет. Стань первым!</p>
        {% endif %}
    </div>
    <h2>Добавить комментарий:</h2>
    <div id="defaultPostCommentForm" class="postComment">
        <form action="{% url comments.post %}" method="post">
            <div class="smilesList">
                <a href="acute" class="putSmile"><img src="/static/images/smiles/acute.gif"/></a>
                <a href="bad" class="putSmile"><img src="/static/images/smiles/bad.gif"/></a>
                <a href="biggrin" class="putSmile"><img src="/static/images/smiles/biggrin.gif"/></a>
                <a href="blum" class="putSmile"><img src="/static/images/smiles/blum.gif"/></a>
                <a href="blush" class="putSmile"><img src="/static/images/smiles/blush.gif"/></a>
                <a href="bomb" class="putSmile"><img src="/static/images/smiles/bomb.gif"/></a>
                <a href="bye" class="putSmile"><img src="/static/images/smiles/bye.gif"/></a>
                <a href="clapping" class="putSmile"><img src="/static/images/smiles/clapping.gif"/></a>
                <a href="cool" class="putSmile"><img src="/static/images/smiles/cool.gif"/></a>
                <a href="diablo" class="putSmile"><img src="/static/images/smiles/diablo.gif"/></a>
                <a href="fool" class="putSmile"><img src="/static/images/smiles/fool.gif"/></a>
                <a href="good" class="putSmile"><img src="/static/images/smiles/good.gif"/></a>
                <a href="greeting" class="putSmile"><img src="/static/images/smiles/greeting.gif"/></a>
                <a href="mad" class="putSmile"><img src="/static/images/smiles/mad.gif"/></a>
                <a href="morning" class="putSmile"><img src="/static/images/smiles/morning.gif"/></a>
                <a href="music" class="putSmile"><img src="/static/images/smiles/music.gif"/></a>
                <a href="negative" class="putSmile"><img src="/static/images/smiles/negative.gif"/></a>
            </div>
            {% if user.is_authenticated %}
                <div class="comments-errors"></div>
                <input type="hidden" name="parent" value="" />
                <input type="hidden" name="uid" value="{{ uid }}" />
                <div class="textarea-wrapper input plus-block">
                    <textarea rows="" cols="" name="message"></textarea>
                </div>
                <input type="submit" value="Опубликовать" class="button submit plus-block" />
                <input type="button" value="" class="button smiles plus-block" />
            {% else %}
                <p>Оставлять комментарии могут только авторизованые пользователи. Пожалуйста войдите в систему, или зарегистрируйтесь.</p>
            {% endif %}
        </form>
    </div>
</div>

<script type="text/javascript" language="javascript">

    var Comments = (function(settings){

        // Check settings
        if(typeof(settings) !== "object") throw("Wrong settings");

        var RESPONSE_ERROR = 1;
        var RESPONSE_SUCCESS = 0;

        var RATING_INCREASE = 0;
        var RATING_DECREASE = 1;

        var $uiContainer = $("#"+settings.containerID);
        var $uiList = $("#"+settings.listID);
        var $uiDefaultPostCommentForm = $("#"+settings.defaultFormID);
        var $uiCommentForm = $("<div class='postComment' />").html($uiDefaultPostCommentForm.html());

        $uiContainer.find(".comment-rating a").live("click", function(event, params){

            var $target = $(event.target).parent();
            var cmd = RATING_INCREASE;

            var cid = $target.attr("href").substring(1);

            if($target.hasClass("dec")) cmd = RATING_DECREASE;

            $.post("{% url comments.rating %}", {method: cmd, cid: cid}, function(response){
                if(response.code == 0){
                    $("#comment"+cid+"Rating").text(response.rating);
                }
            });

            return false;
        });

        $uiList.find("a.post-response").live("click", function(event, params){

            var $uiButton = $(event.target);
            var parentID =  $uiButton.attr("href").substring(1);
            var $uiComment = $("#comment"+parentID+" > .comment  > .form-container");

            $uiCommentForm.find("input[name=parent]").val(parentID);
            $uiComment.append($uiCommentForm);
            $uiContainer.find(".smilesList").hide();
            return false;

        });

        $uiContainer.find(".button.smiles").live("click", function(event, params){
            $(event.target).parent().find(".smilesList").toggle("slow");
        });

        $uiContainer.find(".putSmile").live("click", function(event, params){
            var $a = $(event.target).parent();
            var sm = " :"+$a.attr("href")+":";
            $a.parent().parent().find("textarea").val($a.parent().parent().find("textarea").val() + sm);
            $uiContainer.find(".smilesList").hide("slow");
            return false;
        });

        $uiContainer.find(".postComment > form").live("submit", function(event, params){

            $uiContainer.find(".smilesList").hide();

            var $uiForm = $(event.target);
            var formData = $uiForm.serializeArray();
            var data = {};

            for(var i = 0; i < formData.length; i++){
                var el = formData[i];
                data[el['name']] = el['value'];
            }

            $.post($uiForm.attr("action"), data, function(response){

                if(response.code === RESPONSE_SUCCESS){

                    var $uiParentContainer = $uiList;
                    $uiCommentForm.remove();
                    if(data.parent) $uiParentContainer = $("#comment"+data.parent);
                    $uiParentContainer.append(response.comment);

                    // clear form
                    $uiForm.find("textarea[name=message]").val("");
                    $uiForm.find(".comments-errors").html("");
                    $uiContainer.find("p.no-comments").remove();

                } else {
                    $uiForm.find(".comments-errors").html(response.message);
                }

            });

            return false;

        });

    })({
        containerID: "commentsContainer",
        listID: "commentsList",
        defaultFormID: "defaultPostCommentForm"
    });

</script>
